<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>将字符串首字母大写</title>
    <!-- 引入本地下载好的 vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 挂载点 -->
    <div id="app">
      <!-- header 头部 标题 -->
      <h1>将字符串首字母大写</h1>
      <input type="text" v-model="inputString" placeholder="请输入字符串" />
      <p>转换后的字符串：{{ inputString | capitalize }}</p>
    </div>

    <!-- 用 javascript 脚本语言 创建一个vue实例 -->
    <script type="text/javascript">
      // 注册
      Vue.filter("my-filter", function (value) {
        // 返回处理后的值
        if (!value) return ""; // 如果值为空，返回空字符串
        return value.charAt(0).toUpperCase() + value.slice(1);
      });
      // 创建一个vue实例
      var vm = new Vue({
        // 挂载点
        el: "#app",
        data: {
          inputString: "",
          // 提示：过滤器不会改变原始数据，而是改变数据在页面上的显示形式，优化用户体验
        //   capitalizedString: "",
        },
        // 局部注册过滤器
        filters: {
          // 过滤器
          capitalize: function (value) {
            if (!value) return ""; // 如果值为空，返回空字符串
            return value.charAt(0).toUpperCase() + value.slice(1);
          },
        },
      });
    </script>
  </body>
</html>
